Day 2 開發環境的準備

今天的內容是關於開發環境的準備，我會跳過安裝程式之類的部分，因為這些教學網路上已經很多了。

重新檢視一下目標，我們需要 Node.js 跟資料庫。
為了避免資料庫安裝的麻煩以及增加可攜性，我們選擇使用 Docker 容器技術來處理環境。

首先，我們需要一個簡單的 Dockerfile 來建立我們的開發容器。

FROM node:latest as dev

RUN npm i -g pnpm
WORKDIR /app

這個 Dockerfile 會建立一個 Node.js 的開發環境，並且安裝 pnpm 作為套件管理工具。

PNPM 是一個優於 NPM 跟 Yarn 的套件管理工具，它有良好的依賴鏈結模式，也可作為 Node.js 的版本管理工具。

接著，我們需要一個 docker-compose.yml 來管理我們的開發容器以及資料庫容器，未來還會加上部署時的容器。

version: "3.9"

services:
  dev:
    build:
      context: .
      target: dev
    image: jacoblincool/pure-cat:dev
    container_name: pure-cat-dev
    command: sleep infinity
    volumes:
      - .:/app
    depends_on:
      - db
  db:
    image: mongo:latest
    container_name: pure-cat-db
    ports:
      - "27017:27017"
    volumes:
      - db-storage:/data/db

volumes:
  db-storage: {}

這個 docker-compose.yml 會建立兩個容器，一個是開發容器，一個是資料庫容器。
其中，開發容器會使用我們剛剛建立的 Dockerfile 來建立，並且掛載當前目錄到容器的 /app 上。而資料庫容器則是使用官方的 MongoDB Image 建立，並且掛載一個 Docker Volume 到容器的 /data/db 上。

我們現在可以使用 docker compose up -d dev 來啟動開發環境，並在啟動後使用 docker compose exec -it dev bash 來進入開發容器。

在容器內安裝我們（也許會）需要的套件吧！

root@f4bcd692f002:/app# pnpm i
Scope: all 2 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +464
++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /app/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Downloading registry.npmjs.org/typescript/4.8.3: 11.9 MB/11.9 MB, done
Progress: resolved 464, reused 0, downloaded 464, added 464, done
node_modules/.pnpm/esbuild@0.15.3/node_modules/esbuild: Running postinstall script, done in 468ms
node_modules/.pnpm/esbuild@0.14.54/node_modules/esbuild: Running postinstall script, done in 463ms

devDependencies:
+ @types/jest 28.1.8
+ @types/node 18.7.18
+ @types/node-fetch 2.6.2
+ @types/serve-handler 6.1.1
+ @typescript-eslint/eslint-plugin 5.37.0
+ @typescript-eslint/parser 5.37.0
+ eslint 8.23.1
+ eslint-config-prettier 8.5.0
+ esno 0.16.3
+ jest 28.1.3
+ node-fetch 2.6.7
+ prettier 2.7.1
+ serve-handler 6.1.3
+ ts-jest 28.0.8
+ tsup 6.2.3
+ typedoc 0.23.14
+ typescript 4.8.3

今天寫到一半碰巧遇上地震，考慮加個地震模組。

每日鐵人賽熱門 Top 10 (2022-09-17)

以 2022/09/17 01:00 ~ 2022/09/17 20:00 文章觀看數增加值排名

誤差： 1 小時

1. +145 「全端挑戰」學習Mern全端開發概念與動態網站開發流程懶人包
   • 作者： samko0927
   • 系列：自己做一個價值幾十萬的動態網站，學會Mern開發、前台UI設計各式觀念與各式Lib、typescript你該學會的前端技術
2. +117 是獵人就要來做獵人燉肉阿-波蘭國民菜 - 獵人燉肉Bigo
   • 作者： headhunter_sharon
   • 系列：拜託冰箱第二彈 跟著異國料理環遊世界吧
3. +111 Day 17: 寫在當下 - SIEM 與 MSS/MDR 的關聯
   • 作者： 蔡睿誠 Mark
   • 系列：【 30 天成為 SIEM 達人】
4. +105 Actor Model, Virtual Actor Model以及Orleans提供API的基本單元概念解釋
   • 作者： 老鮑伯
   • 系列：Microsoft Orleans雲原生開發框架從小白到大神
5. +101 React白話文運動01-介紹
   • 作者： hogantech
   • 系列：React框架白話文運動
6. +93 如何製作月曆 date grid 【 calendar | 我不會寫 React Component 】
   • 作者： HelloKayac
   • 系列：【 我不會寫 React Component 】
7. +89 [Kotlin 全面啟動] 序
   • 作者： Jintin
   • 系列：Kotlin 全面啟動
8. +84 導讀【 我不會寫 React Component 】
   • 作者： HelloKayac
   • 系列：【 我不會寫 React Component 】
9. +83 Day-13 被引導的人們-勇者鬥惡龍IV
   • 作者： rei0
   • 系列：搭上時光機、懷舊遊戲記憶30天
10. +82 專案建置【 我不會寫 React Component 】
    • 作者： HelloKayac
    • 系列：【 我不會寫 React Component 】

哇！React！滿街都是 React！